<template>
	<comp-navbar title="修改密码" bgColor="#fff" :fixed="true"></comp-navbar>
	<view class="box">
		<view class="form-wrap">

			<view class="form-item">
				<up-input placeholder="请输入旧密码" color='#646464' v-model="oldpsd"
					:customStyle="{background:'transparent',height:'80rpx',textAlign:'right'}" border="none">
					<template #prefix>
						<view class="iconfont icon-mima"></view>
					</template>
				</up-input>
			</view>
			<view class="form-item">
				<up-input placeholder="请输入新密码" color='#646464' v-model="newpsd"
					:customStyle="{background:'transparent',height:'80rpx',textAlign:'right'}" border="none">
					<template #prefix>
						<view class="iconfont icon-mima"></view>
					</template>
				</up-input>
			</view>
		</view>
		<view class="confirm" @click="handleSave">修改</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';
	import {
		request
	} from '@/utils/request.js'

	const oldpsd = ref('')
	const newpsd = ref('')

	const handleSave = async () => {
		if (!oldpsd.value.trim()) {
			uni.showToast({
				icon: 'none',
				title: '旧密码不能为空'
			})
			return
		}
		if (!newpsd.value.trim()) {
			uni.showToast({
				icon: 'none',
				title: '新密码不能为空'
			})
			return
		}
		const data = {
			oldPwd: oldpsd.value,
			newPwd: newpsd.value
		}
		try {
			const res = await request({
				url: '/Sys_User_YS/ModifyPwd',
				data,
				method: 'GET'
			})
			const {
				status,
				message
			} = res;
			console.log('res', res)
			if (!status) {
				uni.showToast({
					icon: 'none',
					title: message
				})
				return;
			}
			uni.showToast({
				icon: 'none',
				title: '修改成功，请重新登录'
			})
			uni.reLaunch({
				url: '/pages/login/login'
			})
			uni.clearStorageSync()

		} catch (e) {
			//TODO handle the exception
		}

	}
</script>

<style lang="scss" scoped>
	.box {
		padding: 100rpx 0 120rpx 0;
		font-size: 28rpx;
		color: #fff;

		.form-wrap {
			padding: 0 20rpx;

			.form-item {
				margin-bottom: 60rpx;
				border-bottom: 1rpx solid $bor-color;

				.iconfont {
					font-size: 40rpx;
					color: $base-color;
				}

				:deep(.u-input__content__field-wrapper__field) {
					text-align: right !important;
				}
			}
		}

		.confirm {
			bottom: 0rpx;
			width: 90%;
			height: 80rpx;
			margin-top: 40rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			text-align: center;
			color: $base-color;
			background-color: #fff;
			border-radius: 40rpx;
		}

	}
</style>